import { Component } from "vue"
import { ElIcon } from 'element-plus'
import MdiWindowClose from '~icons/mdi/window-close'
import MdiWindowMinimize from '~icons/mdi/window-minimize'
import MdiWindowMaximize from '~icons/mdi/window-maximize'
import MdiWindowRestore from '~icons/mdi/window-restore'
import MdiPinOutline from '~icons/mdi/pin-outline'
import MdiPinOffOutline from '~icons/mdi/pin-off-outline'


export const CloseWindowOption = defineComponent({
  setup(_props, {attrs}) {

    function handleCloseWindow():void {
      window.electron.ipcRenderer.send('application:close-window')
    }

    return ():Component => {
      return <ElIcon size="20" title="关闭" {...attrs} class="window-option close-window no-drag" onClick={handleCloseWindow}>
          <MdiWindowClose />
      </ElIcon>
    }
  }
})

export const MaximizeWindowOption = defineComponent({
  setup(_props, { attrs }) {

    function handleMaximizeWindow():void {
      window.electron.ipcRenderer.send('application:toggle-maximize-window')
    }
    const isMaximize = ref(false)

    onMounted(() => {
      window.electron.ipcRenderer.on('application:toggle-maximize-window', (_, _isMaximize) => {
        isMaximize.value = _isMaximize
      })
    })

    onUnmounted(() => {
      window.electron.ipcRenderer.removeAllListeners('application:toggle-maximize-window')
    })

    return ():Component => {
      return <ElIcon size="20" {...attrs} title={isMaximize.value ? '还原' : '最大化'}  class="window-option maximize-window no-drag" onClick={handleMaximizeWindow}>
          {isMaximize.value ? <MdiWindowRestore/> : <MdiWindowMaximize/>  }
     </ElIcon>
    }
  }
})

export const MinimizeWindowOption = defineComponent({
  setup(_props, { attrs }) {

    function handleMinimizeWindow():void {
      window.electron.ipcRenderer.send('application:minimize-window')
    }

    return ():Component => {
      return <ElIcon size="20" title="最小化" {...attrs} class="window-option minimize-window no-drag" onClick={handleMinimizeWindow}>
          <MdiWindowMinimize />
      </ElIcon>
    }
  }
})

//  alwaysOnTop: true,

export const AlwaysOnTopWindowOption = defineComponent({
  setup(_props, { attrs }) {

    function handleAlwaysOnTopWindow():void {
      isAlwaysOnTop.value = !isAlwaysOnTop.value
      window.electron.ipcRenderer.send('application:always-on-top-window', isAlwaysOnTop.value)
    }

    const isAlwaysOnTop = ref(false)


    return ():Component => {
      return <ElIcon size="20" title="置顶" {...attrs} class="window-option always-on-top-window no-drag" onClick={handleAlwaysOnTopWindow}>
          {
            isAlwaysOnTop.value ? <MdiPinOffOutline /> : <MdiPinOutline />
          }
      </ElIcon>
    }
  }
})
